﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BusinessLogo.aspx.cs" Inherits="CRMWeb.Pages.Admin.BusinessLogo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Business Logo</title>
    <link rel="stylesheet" type="text/css" href="/Css/CrmStyle.css" />
    <link rel="stylesheet" id="newtheme" type="text/css" href="/EasyUI/Themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/EasyUI/Themes/icon.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/EasyUI/jquery.easyui.min.js"></script>
    <link href="../../Css/uploadify.css" rel="stylesheet" />
    <script src="../../Scripts/jquery.uploadify.js"></script>
</head>
<body>
   
        <table id="dgLogo" title="Business Logo" style="width:auto; height: 460px;"
            toolbar="#toolbarLogo" pagination="true" data-options="pageSize:20" rownumbers="true" fitcolumns="true" singleselect="true" autorowheight="true">
            <thead>
                <tr>
                    <th field="ImageFileName" width="150" align="center" data-options="formatter:SetImageFormat">Image</th>
                    <th field="CompanyName" width="150" align="center">Company</th>
                    <th field="Description" width="300" align="center">Description</th>
                </tr>
            </thead>
        </table>
        <div id="toolbarLogo">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newLogo()">New</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editLogo()">Edit</a>
            <a id="lnkDelete" href="javascript:void(0)" class="easyui-linkbutton" onclick="openDelBSPopup()" plain="true" iconcls="icon-remove" title="Delete Business Logo">Delete</a>
        </div>
        <div id="dlgLogo" class="easyui-dialog" style="width: 400px; height: 450px; padding: 10px 20px"
            closed="true" buttons="#dlg-buttons">
            <form id="fmdlgLogo" method="post" runat="server" novalidate>
                <div class="fitem" style="margin-bottom: 10px">
                    <label style="width: 74px;">Image:</label>
                    <input id="txtImageFileName" readonly="true" runat="server" name="txtImageName" type="text" style="width: 265px;" class="easyui-validatebox" />
                </div>
                <div class="fitem" style="margin-bottom: 10px">
                    <asp:FileUpload ID="file_uploads_logo" runat="server" />

                    <input type="hidden" id="hdnLogoAttachment" runat="server" />
                    <div>
                        <table id="attachedLogofiles" style="text-align: left; width: 150px;"></table>
                    </div>
                </div>
                <div class="fitem" style="margin-bottom: 10px">
                    <label style="width: 74px;">Company:</label>
                    <input class="easyui-combobox" id="cmbLogoRole" style="width: 269px;" required="required"
                        data-options="panelWidth:267, 
                     multiple:true,
                    editable:false,
                        valueField: 'MemberGroupName',  
                        textField: 'MemberGroupName',
                        url: '/WebServices/Notice.ashx?method=BindLogoRoles',
                    selected:true" />
                </div>
                <div class="fitem" style="margin-bottom: 10px">
                    <label style="width: 74px;">Description:</label>
                    <input id="txtLogoDesc" runat="server" type="text" style="width: 265px;" class="easyui-validatebox" required="required" />
                    <input type="hidden" id="hdnID" style="display: none" />
                </div>
                <div class="fitem" style="margin-bottom: 10px">
                    <label id="lblPreview" style="width: 74px;">Preview:</label>
                </div>
                <div class="fitem">
                    <img id="imgPreview" src="" style="float: left; border: solid; border-color: #6CAEF5; border-width: 2px; margin-top: -13px; margin-left: 76px;" height="130" width="124" />
                </div>
            </form>
        </div>
        <div id="dlg-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlgLogo').dialog('close')" style="float: left">Cancel</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveLogo()">Save</a>
        </div>
        <div id="dlgDelLogo" class="easyui-dialog" title="Confirm" style="width: 300px; height: 160px" closed="true" resizable="false" modal="true">
            <h4 style="text-align: center">Are you sure want to delete this Business Logo?</h4>
            <div class="fitem" style="text-align:center; padding: 10px; margin-top: 10px">
                <a id="lnkDelLogo" href="javascript:void(0)" class="easyui-linkbutton" onclick="deleteLogo()" disabled="true">OK</a>
                <a id="lnkCancleLogo" href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlgDelLogo').dialog('close')" disabled="true">Cancel</a>
                <span id="spnanimate">
                    <img id="deleteProgress" style="margin-left: 20px" src="../../Media/loading.gif" />
                    <label id="lbltimeOu" style="margin-left: 20px">5</label>
                </span>
            </div>
        </div>
        <script type="text/javascript">

            //Get query string params
            function getQuerystring(key, defaultValue) {
                if (defaultValue == null) defaultValue = "";
                key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
                var qs = regex.exec(window.location.href);
                if (qs == null)
                    return defaultValue;
                else {
                    return qs[1];
                }
            }

            //Set theme
            $(document).ready(function () {
                $('#newtheme').attr('href', '/EasyUI/Themes/' + getQuerystring('Theme', '') + '/easyui.css');

            });

            //Add counter on delete dialog
            $('#dlgDelLogo').dialog({
                onOpen: function () {
                    startCounter(5);

                },
                onClose: function () {
                    $('#lnkDelLogo').linkbutton('disable');
                    $('#lnkCancleLogo').linkbutton('disable');
                    $('#spnanimate').show();
                    $('#lbltimeOu').html('');
                }
            });

            var preFile = '';
            var f_Id = '';
            var attchVal = '';
            var data = [];
            var swf_item = [];

            //Uplodify file upload control
            $(window).load(
              $(function () {
                  $("#file_uploads_logo").uploadify({
                      'multi': false,
                      'swf': '../../Media/uploadify.swf',
                      'width': 74,
                      'height': 27,
                      'float': 'left',
                      'uploader': '../../WebServices/LogoUpload.ashx',
                      'fileSizeLimit': '1MB',
                      'removeCompleted': true,
                      'buttonText': 'Attach Logo',
                      'fileDesc': 'Image Files',
                      'fileTypeExts': '*.gif; *.jpg; *.png;*.jpeg;*.tif',
                      'auto': true,
                      'onUploadComplete': function (file) {

                          preFile = '../../Media/' + fileName;
                          document.getElementById('imgPreview').setAttribute('src', preFile);
                          f_Id = file.id;
                          swf_item.push(f_Id);
                          f_Id = swf_item.join(',');
                          attchVal = fileName;
                          data.push(attchVal);
                          attchVal = data.join(',');
                          $('#txtImageFileName').val(attchVal);
                          $("#hdnLogoAttachment").val(attchVal);
                      }
                  });
              })
          );


            //Strat counter for delete dialog
            function startCounter(limit) {
                setTimeout(function () {
                    if (limit == 0) {
                        $('#lnkDelLogo').linkbutton('enable');
                        $('#lnkCancleLogo').linkbutton('enable');
                        $('#spnanimate').hide();

                    }
                    else {
                        $('#lbltimeOu').html(limit);
                        startCounter(limit - 1);
                    }
                }, 1000);
            }


            var url;
            //Add new business logo
            function newLogo() {
                $("#cmbLogoRole").combobox('reload');
                $('#cmbLogoRole').combobox('textbox').bind('click', function () {
                    $('#cmbLogoRole').combobox('showPanel');
                });


                document.getElementById('imgPreview').setAttribute('src', '');
                if (f_Id == null || f_Id == '') {
                    $('#dlgLogo').dialog('open').dialog('setTitle', 'New Business Logo');
                    $('#fmdlgLogo').form('clear');
                    $('#txtImageFileName').val('');
                    $('#hdnID').val('');
                    url = '/WebServices/BusinessLogo/AddBusinessLogo';
                }
                else {
                    for (var i = 0; i < swf_item.length; i++) {

                        $('#file_upload').uploadify('cancel', swf_item[i]);
                    }
                    $('#cmbLogoRole').combobox('textbox').bind('click', function () {
                        $('#cmbLogoRole').combobox('showPanel');
                    });

                    attchVal = '';
                    data.length = 0;
                    swf_item.length = 0;
                    $('#dlgLogo').dialog('open').dialog('setTitle', 'New Business Logo');
                    $('#fmdlgLogo').form('clear');
                    $('#txtImageFileName').val('');
                    $('#hdnID').val('');
                    url = '/WebServices/BusinessLogo/AddBusinessLogo';
                }

            }

            //Adjust window on resize
            window.onresize = function () {
                $('#dgLogo').datagrid(
                    'resize',
                   {
                     width: window.innerWidth,
                     height: window.innerHeight,
                   });
            }


            //Edit business logo
            function editLogo() {
                $("#cmbLogoRole").combobox('reload');
                var row = $('#dgLogo').datagrid('getSelected');
                if (f_Id == null || f_Id == '') {
                    if (row) {
                        $('#dlgLogo').dialog('open').dialog('setTitle', 'Edit Business Logo');
                        $('#fmdlgLogo').form('load', row);
                        $('#txtImageFileName').val(row.ImageFileName);
                        preFile = '../../Media/' + row.ImageFileName;
                        document.getElementById('imgPreview').setAttribute('src', preFile);
                        $('#hdnID').val(row.ID);
                        var currLogoRole = row.CompanyName;
                        var setLogoRole = currLogoRole.split(',');
                        $('#cmbLogoRole').combobox('setValues', setLogoRole);
                        $('#txtLogoDesc').val(row.Description);
                        url = '/WebServices/BusinessLogo/EditBusinessLogo?ID=' + row.ID;
                    }
                }

                else {
                    if (row) {
                        for (var i = 0; i < swf_item.length; i++) {
                            $('#file_upload').uploadify('cancel', swf_item[i]);
                        }
                        attchVal = '';
                        data.length = 0;
                        swf_item.length = 0;
                        $('#dlgLogo').dialog('open').dialog('setTitle', 'Edit Business Logo');
                        $('#fmdlgLogo').form('load', row);
                        $('#txtImageFileName').val(row.ImageFileName);
                        preFile = '../../Media/' + row.ImageFileName;
                        document.getElementById('imgPreview').setAttribute('src', preFile);
                        $('#hdnID').val(row.ID);
                        var currLogoRole = row.CompanyName;
                        var setLogoRole = currLogoRole.split(',');
                        $('#cmbLogoRole').combobox('setValues', setLogoRole);
                        $('#txtLogoDesc').val(row.Description);
                        url = '/WebServices/BusinessLogo/EditBusinessLogo?ID=' + row.ID;
                    }
                }
            }

            //Open delete dialog
            function openDelBSPopup() {
                var row = $('#dgLogo').datagrid('getSelected');
                if (row) {
                    $('#dlgDelLogo').dialog('open');

                }
            }

            //Delete business logo
            function deleteLogo() {
                var row = $('#dgLogo').datagrid('getSelected');
                if (row) {
                    $.ajax({
                        url: '/WebServices/BusinessLogo.ashx',
                        type: 'POST',
                        data:
                            {
                                method: 'DeleteBusinessLogo',
                                args: { ID: row.ID }
                            },
                        success: function (data) {
                            $('#dgLogo').datagrid('reload');

                            $('#dlgDelLogo').dialog('close');
                        }
                    });
                }
            }

            //Save business logo
            function saveLogo() {
                var strImageName = $('#txtImageFileName').val();
                var ID = $('#hdnID').val();

                var Company = $('#cmbLogoRole').combobox('getText');
                var Description = $('#txtLogoDesc').val();
                if (Company == '' || strImageName == '') {
                    if (strImageName == '') {
                        $.messager.alert('Morgan CRM', 'Logo is required.', 'warning');
                    }
                    else {
                        $.messager.alert('Morgan CRM', 'Please select company...!', 'warning');
                    }
                }
                else {
                    if (ID != '') {
                        if (strImageName != '') {
                            $.ajax({
                                url: '/WebServices/BusinessLogo.ashx',
                                type: 'POST',
                                data: {
                                    method: 'EditBusinessLogo',
                                    args: { ID: ID, ImageFileName: strImageName, Company: Company, Description: Description }
                                },
                                success: function (data) {
                                    if (data == 1) {
                                        $('#dgLogo').datagrid('reload');
                                        $('#dlgLogo').dialog('close');
                                    }
                                    else {
                                        $.messager.alert('Morgan CRM', 'Company is already exist.', 'info');
                                        
                                    }
                                }
                            });
                        }
                    }
                    else {
                        if (strImageName != '') {

                            $.ajax({
                                url: '/WebServices/BusinessLogo.ashx',
                                type: 'POST',
                                data: {
                                    method: 'AddBusinessLogo',
                                    args: { ImageFileName: strImageName, Company: Company, Description: Description }
                                },
                                success: function (data) {
                                    if (data == 1) {
                                        $('#dgLogo').datagrid('reload');
                                        $('#dlgLogo').dialog('close');
                                    }
                                    else {
                                        $.messager.alert('Morgan CRM', 'Company is already exist.', 'info');
                                    }
                                }
                            });
                        }
                    }
                }
            }

            //Load business info in datagrid
            $(document).ready(function () {
                $('#dgLogo').datagrid({
                    url: '/WebServices/BusinessLogo.ashx?method=GetLogoList&Company=' + getQuerystring('Company', ''),
                    onDblClickRow: function (index, rowdata) {
                        editLogo();
                    }
                });
            });

            //Show image in datagrid
            function SetImageFormat(cellvalue, options, rowObject) {
                var cellValueInt = parseInt(cellvalue);
                var srcVal = '../../Media/' + cellvalue;
                return "<img src='" + srcVal + "' height='" + 32 + "' width='" + 32 + "' alt='" + cellvalue + "'title='" + cellvalue + "' />";

            };




        </script>

</body>
</html>

